<template>
	<view>
		<view class="">
			<view class="m-h1" style="text-align: center;">
				选择定制类型
			</view>
			<view class="" @tap="toBack()">
				<image class="nav-margin-back-img" src="../../static/back.png" mode="widthFix"></image>
			</view>
		</view>	
		<view class="nav-margin-top" style="display: flex;">
			<view class="nav-list">
				<view class="nav-list-bottom-active-t"  style="margin-top: 20rpx;">
					类型
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon-active-t">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom-active"  style="margin-top: 20rpx;">
					规格
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon-active">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom"  style="margin-top: 20rpx;">
					配送
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon">
						</view>
					</view>
				</view>
			</view>
			
			<view class="nav-list">
				<view class="nav-list-bottom"  style="margin-top: 20rpx;">
					结算
				</view>
				<view style="position: relative;top: -7rpx;">
					<view style="display: flex; justify-content: center;">
						<view class="nav-list-icon">
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
		
		<view class="" style="margin-top: 20rpx;margin-bottom: 36rpx;">
			<image style="width: 750rpx;height: 560rpx;" src="https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/bancai-1.png" mode="widthFix"></image>
		</view>
		
		<view class="content">
			<view class="content-h2">
				板材规格
			</view>
			<view class="content-p-mini">
				默认长度为600mm,高度为250mm,仅宽度可选择
			</view>
			
			<view class="content-flex" style="margin-top: 64rpx;">
				<view @tap="isActive('isActive1')" v-bind:class="[isActive1?'content-list-box-active':'content-list-box']" >
						<text :class="[isActive1?'content-h3-active':'content-h3']">100</text>
				</view>
				
				<view @tap="isActive('isActive2')" v-bind:class="[isActive2?'content-list-box-active':'content-list-box']" >
						<text :class="[isActive2?'content-h3-active':'content-h3']">120</text>
				</view>
				
			</view>
			
			<view class="content-flex">
				<view @tap="isActive('isActive3')" v-bind:class="[isActive3?'content-list-box-active':'content-list-box']" >
						<text :class="[isActive3?'content-h3-active':'content-h3']">150</text>
				</view>
				
				<view @tap="isActive('isActive4')" v-bind:class="[isActive4?'content-list-box-active':'content-list-box']" >
						<text :class="[isActive4?'content-h3-active':'content-h3']">200</text>
				</view>
				
			
			</view>
			
			<view class="content-flex">
				
				<view @tap="isActive('isActive5')" v-bind:class="[isActive5?'content-list-box-active':'content-list-box']" >
						<text :class="[isActive5?'content-h3-active':'content-h3']">240</text>
				</view>
				
				<view @tap="isActive('isActive6')" v-bind:class="[isActive6?'content-list-box-active':'content-list-box']" >
						<text :class="[isActive6?'content-h3-active':'content-h3']">250</text>
				</view>
				
			</view>
			
			
			<view class="c-h2" style="margin-top: 36rpx;">
				调整长度
			</view>
			<view class="m-p-mini m-margin-bottom">
				您可根据需求设置板块单体长度
			</view>
			
			<view class="" style="display: flex;justify-content: center;margin-top: 36rpx;">
				<text @click="open()" class="c-rang">{{value1}}</text><text class="c-rang-1" style="position: relative;top: 12rpx;left: 6rpx;">mm</text>
				
			</view>
			<view class="m-margin-bottom">
			   <slider class="m-margin-bottom" max="3200" min="1800" :value="value1" @change="sliderChange1" step="10" />
			 </view>
			
			<view class="content-h2" >
				槽口
			</view>
			<view class="content-p-mini">
				请根据您的需求选择适合的槽口进行定制
			</view>
			
			<view class="content-flex" style="margin-top: 64rpx;">
				<view @tap="isActive7=1" :class="[isActive7==1?'content-list-box-active':'content-list-box']">
						<text :class="[isActive7==1?'content-h3-active':'content-h3']">止水槽</text>
				</view>
				
				<view @tap="isActive7=2" :class="[isActive7==2?'content-list-box-active':'content-list-box']">
						<text :class="[isActive7==2?'content-h3-active':'content-h3']">T形槽</text>
				</view>
	
			</view>
			
			<view class="content-h2">
				材料等级
			</view>
			<view class="content-p-mini">
				请根据您的需求选择适合的类型进行定制
			</view>
			
			<view class="content-flex " style="margin-top: 64rpx;">
				<view @tap="isLevel='1'" :class="[isLevel=='1'?'content-list-box-active':'content-list-box']">
						<text :class="[isLevel=='1'?'content-h3-active':'content-h3']">A06</text>
				</view>
				
				<view @tap="isLevel='2'" :class="[isLevel=='2'?'content-list-box-active':'content-list-box']">
						<text :class="[isLevel=='2'?'content-h3-active':'content-h3']">B05</text>
				</view>	
			</view>
			<view class="content-flex" style="">
				<view @tap="isLevel='3'" :class="[isLevel=='3'?'content-list-box-active':'content-list-box']">
						<text :class="[isLevel=='3'?'content-h3-active':'content-h3']">单筋</text>
				</view>
				
				<view @tap="isLevel='4'" :class="[isLevel=='4'?'content-list-box-active':'content-list-box']">
						<text :class="[isLevel=='4'?'content-h3-active':'content-h3']">双筋</text>
				</view>	
			</view>
			
			
			<view class="content-h2">
				购买量
			</view>
			<view class="content-p-mini">
				购买量请高于我们的40m³起订量
			</view>
			<view class="content-flex" style="margin-top: 64rpx;">
				<view class="e-input">
					<view class="">
						<input class="content-input" type="text" placeholder="请输入您的起定量" value="" />
					</view>	
				</view>		
			</view>
			<text style="position:relative;top: -70rpx;left: 604rpx;">m³</text>
		
		
			
			<view class="content-h2">
				交货时间
			</view>
			<view class="content-p-mini">
				请选择期望的交付日期（区间）
			</view>
			
			<view class="content-flex" style="margin-top: 64rpx;">
				<view class="content-list-box">
					<view class="uni-list-cell-db">
					    <picker class="en-h3" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
					        <view class="uni-input">{{date}}</view>
					    </picker>
					</view>
						
				</view>
				<view class="" style=" background-color: #1B4098;width: 30rpx;height: 2rpx; position: relative;top: 50rpx;">
					
				</view>
				<view class="content-list-box">
					
					<view class="uni-list-cell-db">
					    <picker class="en-h3" mode="date" :value="date2" :start="startDate2" :end="endDate2" @change="bindDateChange2">
					        <view class="uni-input">{{date2}}</view>
					    </picker>
					</view>
						
				</view>
			</view>
			
				
			
		</view>
	
		<view class="" style="margin-top: 202rpx;background-color: #A9A9A9;width: 750rpx;height: 2rpx;">
		</view>
		<view class="o-bottom">
			<view class="content" style="margin-top: 10rpx;">
				<view class="" style="display: flex;justify-content: space-between;">
					<view class="" >
						<text class="t-font">当前预估价：</text>
						<text class="t-price">¥4089.34</text>
					</view>
					<view class="">
						<button type="default" @tap="toEnactThree()" style="background-color: #1B4098; color: #FFFFFF;width: 280rpx;height: 80rpx;">下一步</button>
					</view>
				</view>
				
				<view class="" style="position: relative;top: 48rpx; display: flex;justify-content: center;">
					<view class="" style="background-color: #000000;height: 10rpx;width: 268rpx;">
						
					</view>
				</view>
			
			</view>
			
		</view>
		
		<view class="">
			<uni-popup ref="popup" type="center">
				<view class="" style="width: 750rpx;height: 400rpx; background-image: url(https://emos-lei.oss-cn-beijing.aliyuncs.com/v2/img/bg.png);">
					<view class="i-content" style="margin-top: 46rpx;margin-bottom: 16rpx;">
						<view class="i-font-1" style="">
							板块长度
						</view>
						
						<view class="i-font-2" style="margin-bottom: 32rpx;">
							根据您的需求设置您的板块长度
						</view>
						<view class="i-input" style="display: flex;">
							<view class="i-input-font" style="padding-top: 20rpx;" >
								<input class="" placeholder="请输入板块长度" type="text" :value="temp"  @input="onKeyInput" />
							</view>
							<view class="i-input-font-2" style="padding-top: 20rpx;">
								mm
							</view>
						</view>
						
						<view class="" style="margin-top: 48rpx;">
							<button @tap="close()" style="height: 80rpx;width: 654rpx;background-color: #1B4098;" type="default">
								<text class="p-font-1">确定</text>
								</button>
						</view>
					</view>
				</view>
			</uni-popup>
			
		</view>
		<view @click="toIndex" class="o-2-box" style="background-color: #C4C7D4;width: 50rpx;height: 50rpx;border-radius: 50%;display: flex;justify-content: center;">
			<image style="width: 30rpx;height: 30rpx;position: relative;top:10rpx" src="../../static/index-1.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
			},
		data() {
			const currentDate = this.getDate({
			            format: true
			        })
			return {
				isActive1:true,
				isActive2:false,
				isActive3:false,
				isActive4:false,
				isActive5:false,
				isActive6:false,
				isActive7:true,
				date: '请选择最早日期',
				date2: '请选择最晚日期',
				time: '12:01',
				time2: '12:01',
				value1:1800,
				isLevel:0,
				temp:'',
			}
		},
		computed: {
		        startDate() {
					var d = new Date();
		            return d.getFullYear()+"-"+d.getMonth()+"-"+d.getDate();
		        },
		        endDate() {
		            return this.getDate('end');
		        }
		    },
		methods: {
			toIndex:function(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			onKeyInput:function(e){
				this.temp = e.target.value;
				
			},
			open(){
			    this.$refs.popup.open()
			},
			close(){
				if(Number.parseInt(this.temp)<1800){
					uni.showToast({
						icon:"none",
						title:"不能小于1800",
					})
				}else if(Number.parseInt(this.temp)>3200){
					uni.showToast({
						icon:"none",
						title:"超出3200了",
					})
				}
				else if(Number.parseInt(this.temp)%5!=0){
					uni.showToast({
						icon:"none",
						title:"输入为为5的倍数",
					})
				}
				else{
					this.value1 = Number.parseInt(this.temp)
					this.$refs.popup.close()
				}
				
			    
			},
			sliderChange1(e) {
				this.value1 = e.detail.value;
				if(e.detail.value1<1800){
					this.value = 1800
					uni.showToast({
						icon:"none",
						title:"长度必须大于等于1800mm",	
					})
				}
			 },
			isActive:function(a){
				if(a=='isActive1'){
					this.isActive1 = !this.isActive1;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive2'){
					this.isActive1 = false;
					this.isActive2 = !this.isActive2;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive3'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = !this.isActive3;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive6'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = false;
					this.isActive6 = !this.isActive6;
				}else if(a=='isActive4'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = !this.isActive4;
					this.isActive5 = false;
					this.isActive6 = false;
				}else if(a=='isActive5'){
					this.isActive1 = false;
					this.isActive2 = false;
					this.isActive3 = false;
					this.isActive4 = false;
					this.isActive5 = !this.isActive5;
					this.isActive6 = false;
				}
			},
			toBack:function(){
				console.log(1)
				uni.navigateBack({
					delta: 1 //返回上一级页面
				})
			},
			toEnactThree:function(){
				uni.navigateTo({
					url:"../panel-3/panel-3"
				})
			},
			 bindDateChange: function(e) {
			            this.date = e.target.value
			        },
			        bindTimeChange: function(e) {
			            this.time = e.target.value
			        },
			        getDate(type) {
			            const date = new Date();
			            let year = date.getFullYear();
			            let month = date.getMonth() + 1;
			            let day = date.getDate();
			
			            if (type === 'start') {
			                year = year - 60;
			            } else if (type === 'end') {
			                year = year + 2;
			            }
			            month = month > 9 ? month : '0' + month;;
			            day = day > 9 ? day : '0' + day;
			            return `${year}-${month}-${day}`;
			        },
			bindDateChange2: function(e) {
			           this.date2 = e.target.value
			       },
			       bindTimeChange: function(e) {
			           this.time2 = e.target.value
			       },
			       getDate(type) {
			           const date = new Date();
			           let year = date.getFullYear();
			           let month = date.getMonth() + 1;
			           let day = date.getDate();
						
			           if (type === 'start') {
			               year = year - 60;
			           } else if (type === 'end') {
			               year = year + 2;
			           }
			           month = month > 9 ? month : '0' + month;;
			           day = day > 9 ? day : '0' + day;
			           return `${year}-${month}-${day}`;
			       }
			    
		}
	}
</script>

<style scoped lang="less">
@import url("../enact-1/enact-1.less");
@import url("../enact-2/enact-2.less");
@import url("panel-2.less");
@import url("../../style.less");
</style>
